<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<style>
			.father2{
				width: 300px;
				height: 300px;
				background: deeppink;
				
			}
			.father{
				width: 100px;
				height: 100px;
				background: red;
				margin: 20px;
				/* position: relative; */
				position: relative;
				top: 50px;
				left: 20px;
				
			}
			.son{
				width: 100px;
				height: 100px;
				background: blueviolet;		
					}
		</style>
	</head>
	<body>
		<!--
		 position定位
		  类型
		  静态定位 static 清除定位
		  相对定位 relative 它是以自我为中心 占据标准流的位置
		  绝对定位 absolute 找父元素
		  偏移量
		  top bottom
		  left right
		  -->
		  <div class="father2"></div>
		 <div class="father">
			 <div class="son"></div>
		 </div>
	</body>
</html>
